<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--<script src="js/ZCR.js" type="text/javascript" charset="utf-8"></script>-->
		<style type="text/css">
			body {
				margin: 0;
				padding: 0;
			}
			
			div {
				font-size: 20px;
				text-align: center;
				line-height: 50px;
				width: 100px;
				height: 50px;
				background-color: deepskyblue;
				position: absolute;
			}
			
			#div1 {
				background-color: greenyellow;
				left: 200px;
				top: 120px;
			}
			
			#div2 {
				background-color: yellowgreen;
				left: 310px;
				top: 120px;
			}
			
			#div3 {
				background-color: yellow;
				left: 420px;
				top: 120px;
			}
			
			#div4 {
				background-color: deepskyblue;
				left: 530px;
				top: 120px;
			}
		</style>
	</head>

	<body>
		<a href="###"><div id="div1">div1</div></a>
		<a href="###"><div id="div2">div2</div></a>
		<a href="###"><div id="div3">div3</div></a>
		<a href="###"><div id="div4">div4</div></a>
		<script type="text/javascript">
			var div1 = document.getElementById("div1");
			var div2 = document.getElementById("div2");
			var div3 = document.getElementById("div3");
			var div4 = document.getElementById("div4");
			var divs = document.querySelectorAll("div");
			function changeDiv(div) {
				div.onmousedown = function(ev) {
					var evObj = ev || window.event;
					//
					var disX = evObj.clientX - div.offsetLeft;
					var disY = evObj.clientY - div.offsetTop;
					//在down里写onmousemove
					document.onmousemove = function(ev) {
						var e = ev || window.event;
						//计算div定位的点	
						var x = e.clientX - disX;
						var y = e.clientY - disY;
						div.style.left = x + "px";
						div.style.top = y + "px";
						if(div.offsetLeft <= 0 || div.offsetTop <= 0) {
							div.style.left = "0px";
							div.style.top = "0px";
						}
					}
					document.onmouseup = function() {
						document.onmousemove = "";
					}
				}
			}
			changeDiv(div1);
			changeDiv(div2);
			changeDiv(div3);
			changeDiv(div4);
			
			function checkPeng(obj1, obj2) { //检测矩形碰撞
				var disX = (obj1.w + obj2.w) / 2;
				var disY = (obj1.h + obj2.h) / 2;
				var centerX = Math.abs(obj1.x + (obj1.w / 2) - (obj2.x + (obj2.w / 2)));
				var centerY = Math.abs(obj1.y + (obj1.h / 2) - (obj2.y + (obj2.h / 2)));
				if(centerX < disX && centerY < disY) {
					console.log("aaa");
					return true;
				} else {
					return false;
					console.log("bbb");
				}
			}
			checkPeng(div1,div2);
		</script>
	</body>

</html>